<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- padding-left: 420px;-->
    <style>
        body,
        p,
        h1,
        h2,
        h3,
        h4,
        h5{
            padding: 0;
            margin: 0;
        }
        img {
    border: none;
    display: block;
    max-width: 100%
}
        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        body {
            background-color: rgb(247, 247, 247);
            width: 100%;
        }

        h3,
        p {
            margin: 0;
            padding: 0;
        }

        header {
            min-width: 32px;
            display: flex;
            flex-wrap: wrap;
            position: fixed;
            top: 0;
            background-color: #fff;
            display: block;
            width: 100%;
            z-index: 9;
        }

        header h2 {
            float: left;
            padding-left: 20px;
            padding-top: 20px;
        }

        header .right {
            display: flex;
        }

        .right {
            float: right;

        }

        img {
            border: none;
            display: block;
        }

        .zb {
            overflow: hidden;
            margin-bottom: 5px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        .zb img {
            float: left;
            width: 20%;
        }

        .text {
            float: left;
            margin-left: 8px;
        }

        .text h3 {
            font-size: 14px;
            color: #000;
            line-height: 29px;
        }

        .text p {
            font-size: 14px;
            color: #999;
            line-height: 22px;
            text-indent: 2em;
        }
        .mycourse img {
            width: 100%;
        }

        .my {
            margin-bottom: 5px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        .my img {
            float: left;
            width: 55%;
        }
        .my p{
 
        }
        #fixed {
            top: 0;
            left: 0;
            height: 80px;
            background-color: #ccc;
            width: 100%;
        }


        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            min-width: 320px;
            z-index: 9;
        }

        .footercontainer {
            height: 60px;
            min-width: 320px;
            background-color: #fff;
        }

        .footercontainer ul {
            width: 100%;
            height: 60px;
            text-align: center;
            display: flex;
        }

        .footercontainer ul li {
            width: 30%;
            height: 60px;
        }

        .footercontainer a {
            margin: 0;
            padding: 0;
            color: #000;
            text-decoration: none;
        }

        .footercontainer ul li a img {
            height: 32px;
            width: 32px;
            margin: 0 auto;
            padding: 0;
        }

        .footercontainer ul li p {
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <header>
        <h2>课程</h2>
        <div class="right" style="padding-top: 20px;">
            <div>
                <img src="images/公文包.png"></div>
            &nbsp;&nbsp;
            <div><img src="images/下载.png" alt=""></div>
    </header>
    <img style="overflow: hidden; display: block;margin-top: 100px;" src="images/prosess/10.jpg">
    <h2 id="head">我的直播课&nbsp;3</h2>
    <section id="zb">
        <div class="zb">
            <h5 style="width:320px; border-radius: 10%;" style="background-color: #f6f6f6;">2020年12月30日&nbsp;19:00</h5>
            <img src="images/zb3.png">
            <div class="text">
                <h3>王道论坛</h3>
                <p>
                    【适用21/22考研】王道21考研计算机初试考题深度解析
                </p>
            </div>
        </div>

        <div class="zb">
            <h5 style="background-color: #f6f6f6;">2020年12月20日&nbsp;19:00</h5>
            <img src="images/zb3.png">
            <div class="text">
                <h3>王道论坛</h3>
                <p>
                    （12月20日19:00直播）计算机考研必备的C语言基础暨C语言督学...
                </p>
            </div>
        </div>

        <div class="zb">
            <h5 style="background-color: #f6f6f6;">2020年12月13日&nbsp;19:00</h5>
            <img src="images/zb3.png">
            <div class="text">
                <h3>王道论坛</h3>
                <p>
                    （12月13日19:00直播）计算机考研最全院校规划及22高分上岸攻略
                </p>
            </div>
        </div>
    </section>
    <h2 id="fixe">我的课程&nbsp;5</h2>
    <section id="mycourse">
        <div class="my">
            <img src="images/JavaWeb.jpg">
            <div class="text">
                <h3>Java&nbsp;Web应用开发</h3>
                <p>
                    扬州市职业大学
                </p>
                <p class="time">已更新70学时</p>
            </div>
        </div>

        <div class="my">
            <img src="images/hot1.png">
            <div class="text">
                <h3>Python语言基础与应用</h3>
                <p>北京大学</p>

                <p class="time">已更新16学时</p>
            </div>
        </div>

        <div class="my">
            <img src="images/softWare.jpg">
            <div class="text">
                <h3>软件体系结构</h3>
                <p>
                    北京科技大学
                </p>
                <p class="time">已更新16学时</p>
            </div>
        </div>
        <div class="my">
            <img src="images/hot2.jpg">
            <div class="text">
                <h3>大学英语自学课程（上）</h3>
                <p>
                    北京科技大学
                </p>
                <p class="time">已更新16学时</p>
            </div>
        </div>
        <div class="my">
            <img src="images/hot3.jpg">
            <div class="text">
                <h3>心理学与生活</h3>
                <p>
                    南京大学
                </p>
                <p class="time">已更新12学时</p>
            </div>
        </div>
    </section>
    <footer id="footer">
        <div class="footercontainer">
            <ul>
                <li> <a href="index.html"><img src="images/home.png" alt="">
                        <p>首页</p>
                    </a>
                </li>
                <li><a href="mystudy.html"><img src="images/mystudy.png" alt="">
                        <p>我的学习</p>
                    </a>
                </li>
                <li><a href="account.html"><img src="images/account.png" alt="">
                        <p>账号</p>
                    </a>
                </li>
            </ul>
        </div>
    </footer>


    <script>
        window.onscroll = function () {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var h = head.offsetHeight;
            //console.log(st);
            if (st > h+48) {
                fixed.style.position = "fixed";
            } else {
                fixed.style.position = "static"
            }
        }
    </script>
</body>

</html>